<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spring Cloud 微服务接口测试平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .main-container {
            max-width: 1400px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
            overflow: hidden;
            backdrop-filter: blur(10px);
        }
        
        .page-header {
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
            color: white;
            padding: 40px;
            text-align: center;
            position: relative;
        }
        
        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
        }
        
        .page-header h1 {
            font-size: 3em;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }
        
        .page-header p {
            font-size: 1.2em;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }
        
        .main-content {
            padding: 40px;
        }
        
        .service-module {
            margin-bottom: 50px;
            border: 2px solid #e0e6ed;
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .service-module:hover {
            border-color: #74b9ff;
            box-shadow: 0 10px 30px rgba(116, 185, 255, 0.2);
        }
        
        .service-title {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 25px;
            border-bottom: 2px solid #e0e6ed;
        }
        
        .service-title h2 {
            color: #2d3436;
            margin-bottom: 12px;
            font-size: 1.8em;
        }
        
        .service-endpoint {
            color: #636e72;
            font-family: 'Consolas', 'Monaco', monospace;
            background: #ddd6fe;
            padding: 8px 15px;
            border-radius: 8px;
            display: inline-block;
            font-size: 0.95em;
        }
        
        .api-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
            gap: 25px;
            padding: 25px;
        }
        
        .api-item {
            border: 1px solid #e0e6ed;
            border-radius: 12px;
            padding: 25px;
            background: #ffffff;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .api-item:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            transform: translateY(-3px);
            border-color: #74b9ff;
        }
        
        .api-name {
            font-size: 1.3em;
            font-weight: 600;
            margin-bottom: 12px;
            color: #2d3436;
        }
        
        .http-method {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.85em;
            font-weight: 700;
            margin-bottom: 12px;
            text-transform: uppercase;
        }
        
        .method-get { background: #00b894; color: white; }
        .method-post { background: #0984e3; color: white; }
        .method-put { background: #fdcb6e; color: #2d3436; }
        .method-delete { background: #e17055; color: white; }
        
        .api-path {
            font-family: 'Consolas', 'Monaco', monospace;
            background: #f1f3f4;
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 18px;
            font-size: 0.9em;
            border-left: 4px solid #74b9ff;
        }
        
        .input-group {
            margin-bottom: 18px;
        }
        
        .input-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #636e72;
        }
        
        .input-group input, .input-group textarea {
            width: 100%;
            padding: 10px;
            border: 2px solid #e0e6ed;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }
        
        .input-group input:focus, .input-group textarea:focus {
            outline: none;
            border-color: #74b9ff;
            box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.1);
        }
        
        .input-group textarea {
            height: 120px;
            resize: vertical;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        
        .test-button {
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 600;
            transition: all 0.3s ease;
            width: 100%;
        }
        
        .test-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(116, 185, 255, 0.4);
        }
        
        .test-button:active {
            transform: translateY(0);
        }
        
        .response-area {
            margin-top: 18px;
            padding: 18px;
            border-radius: 8px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 13px;
            white-space: pre-wrap;
            max-height: 350px;
            overflow-y: auto;
            border: 2px solid #e0e6ed;
        }
        
        .response-area.success {
            background: #d1f2eb;
            border-color: #00b894;
            color: #00695c;
        }
        
        .response-area.error {
            background: #ffeaa7;
            border-color: #e17055;
            color: #d63031;
        }
        
        .status-panel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        
        .status-card {
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
            color: white;
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(116, 185, 255, 0.3);
        }
        
        .status-number {
            font-size: 2.5em;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .status-text {
            font-size: 1em;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="page-header">
            <h1>🌐 Spring Cloud 微服务测试中心</h1>
            <p>用户管理服务 & 订单管理服务 API 接口测试平台</p>
        </div>
        
        <div class="main-content">
            <!-- 用户服务模块 -->
            <div class="service-module">
                <div class="service-title">
                    <h2>👥 用户管理服务 (User Management Service)</h2>
                    <div class="service-endpoint">http://localhost:8081/api/users</div>
                </div>
                
                <div class="api-container">
                    <!-- 查询所有用户 -->
                    <div class="api-item">
                        <div class="api-name">查询所有用户</div>
                        <div class="http-method method-get">GET</div>
                        <div class="api-path">/api/users</div>
                        <button class="test-button" onclick="fetchAllUsers()">执行测试</button>
                        <div id="fetchAllUsers-result" class="response-area" style="display:none;"></div>
                    </div>
                    
                    <!-- 根据ID查询用户 -->
                    <div class="api-item">
                        <div class="api-name">根据ID查询用户</div>
                        <div class="http-method method-get">GET</div>
                        <div class="api-path">/api/users/{id}</div>
                        <div class="input-group">
                            <label>用户ID:</label>
                            <input type="number" id="fetchUserById-id" placeholder="请输入用户ID">
                        </div>
                        <button class="test-button" onclick="fetchUserById()">执行测试</button>
                        <div id="fetchUserById-result" class="response-area" style="display:none;"></div>
                    </div>
                    
                    <!-- 创建新用户 -->
                    <div class="api-item">
                        <div class="api-name">创建新用户</div>
                        <div class="http-method method-post">POST</div>
                        <div class="api-path">/api/users</div>
                        <div class="input-group">
                            <label>用户名:</label>
                            <input type="text" id="createUser-name" placeholder="请输入用户名">
                        </div>
                        <div class="input-group">
                            <label>邮箱地址:</label>
                            <input type="email" id="createUser-email" placeholder="请输入邮箱地址">
                        </div>
                        <button class="test-button" onclick="createUser()">执行测试</button>
                        <div id="createUser-result" class="response-area" style="display:none;"></div>
                    </div>
                </div>
            </div>
            
            <!-- 订单服务模块 -->
            <div class="service-module">
                <div class="service-title">
                    <h2>📋 订单管理服务 (Order Management Service)</h2>
                    <div class="service-endpoint">http://localhost:8083/api/orders</div>
                </div>
                
                <div class="api-container">
                    <!-- 查询所有订单 -->
                    <div class="api-item">
                        <div class="api-name">查询所有订单</div>
                        <div class="http-method method-get">GET</div>
                        <div class="api-path">/api/orders</div>
                        <button class="test-button" onclick="fetchAllOrders()">执行测试</button>
                        <div id="fetchAllOrders-result" class="response-area" style="display:none;"></div>
                    </div>
                    
                    <!-- 根据ID查询订单 -->
                    <div class="api-item">
                        <div class="api-name">根据ID查询订单</div>
                        <div class="http-method method-get">GET</div>
                        <div class="api-path">/api/orders/{id}</div>
                        <div class="input-group">
                            <label>订单ID:</label>
                            <input type="number" id="fetchOrderById-id" placeholder="请输入订单ID">
                        </div>
                        <button class="test-button" onclick="fetchOrderById()">执行测试</button>
                        <div id="fetchOrderById-result" class="response-area" style="display:none;"></div>
                    </div>
                    
                    <!-- 创建新订单 -->
                    <div class="api-item">
                        <div class="api-name">创建新订单</div>
                        <div class="http-method method-post">POST</div>
                        <div class="api-path">/api/orders</div>
                        <div class="input-group">
                            <label>用户ID:</label>
                            <input type="number" id="createOrder-userId" placeholder="请输入用户ID">
                        </div>
                        <div class="input-group">
                            <label>商品名称:</label>
                            <input type="text" id="createOrder-productName" placeholder="请输入商品名称">
                        </div>
                        <div class="input-group">
                            <label>订单金额:</label>
                            <input type="number" step="0.01" id="createOrder-amount" placeholder="请输入订单金额">
                        </div>
                        <button class="test-button" onclick="createOrder()">执行测试</button>
                        <div id="createOrder-result" class="response-area" style="display:none;"></div>
                    </div>
                </div>
            </div>
            
            <!-- 统计面板 -->
            <div class="status-panel">
                <div class="status-card">
                    <div class="status-number" id="user-count">0</div>
                    <div class="status-text">用户总数</div>
                </div>
                <div class="status-card">
                    <div class="status-number" id="order-count">0</div>
                    <div class="status-text">订单总数</div>
                </div>
                <div class="status-card">
                    <div class="status-number" id="total-amount">¥0</div>
                    <div class="status-text">订单总额</div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // API基础配置
        const API_CONFIG = {
            USER_SERVICE: 'http://localhost:8081',
            ORDER_SERVICE: 'http://localhost:8083'
        };
        
        // 通用请求函数
        async function makeRequest(url, options = {}) {
            try {
                const response = await fetch(url, {
                    headers: {
                        'Content-Type': 'application/json',
                        ...options.headers
                    },
                    ...options
                });
                
                const data = await response.json();
                return {
                    success: response.ok,
                    data: data,
                    status: response.status
                };
            } catch (error) {
                return {
                    success: false,
                    error: error.message
                };
            }
        }
        
        // 显示响应结果
        function displayResponse(elementId, result) {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            
            if (result.success) {
                element.className = 'response-area success';
                element.textContent = JSON.stringify(result.data, null, 2);
            } else {
                element.className = 'response-area error';
                element.textContent = result.error || `错误: ${result.status}`;
            }
        }
        
        // 用户服务API
        async function fetchAllUsers() {
            const result = await makeRequest(`${API_CONFIG.USER_SERVICE}/api/users`);
            displayResponse('fetchAllUsers-result', result);
            updateUserCount();
        }
        
        async function fetchUserById() {
            const id = document.getElementById('fetchUserById-id').value;
            if (!id) {
                alert('请输入用户ID');
                return;
            }
            
            const result = await makeRequest(`${API_CONFIG.USER_SERVICE}/api/users/${id}`);
            displayResponse('fetchUserById-result', result);
        }
        
        async function createUser() {
            const name = document.getElementById('createUser-name').value;
            const email = document.getElementById('createUser-email').value;
            
            if (!name || !email) {
                alert('请填写完整的用户信息');
                return;
            }
            
            const result = await makeRequest(`${API_CONFIG.USER_SERVICE}/api/users`, {
                method: 'POST',
                body: JSON.stringify({ username: name, email: email })
            });
            
            displayResponse('createUser-result', result);
            updateUserCount();
        }
        
        // 订单服务API
        async function fetchAllOrders() {
            const result = await makeRequest(`${API_CONFIG.ORDER_SERVICE}/api/orders`);
            displayResponse('fetchAllOrders-result', result);
            updateOrderStats();
        }
        
        async function fetchOrderById() {
            const id = document.getElementById('fetchOrderById-id').value;
            if (!id) {
                alert('请输入订单ID');
                return;
            }
            
            const result = await makeRequest(`${API_CONFIG.ORDER_SERVICE}/api/orders/${id}`);
            displayResponse('fetchOrderById-result', result);
        }
        
        async function createOrder() {
            const userId = document.getElementById('createOrder-userId').value;
            const productName = document.getElementById('createOrder-productName').value;
            const amount = document.getElementById('createOrder-amount').value;
            
            if (!userId || !productName || !amount) {
                alert('请填写完整的订单信息');
                return;
            }
            
            const result = await makeRequest(`${API_CONFIG.ORDER_SERVICE}/api/orders`, {
                method: 'POST',
                body: JSON.stringify({
                    userId: parseInt(userId),
                    name: productName,
                    price: parseFloat(amount) * 100, // 转换为分
                    num: 1
                })
            });
            
            displayResponse('createOrder-result', result);
            updateOrderStats();
        }
        
        // 更新统计数据
        async function updateUserCount() {
            try {
                const result = await makeRequest(`${API_CONFIG.USER_SERVICE}/api/users`);
                if (result.success && Array.isArray(result.data)) {
                    document.getElementById('user-count').textContent = result.data.length;
                }
            } catch (error) {
                console.error('更新用户统计失败:', error);
            }
        }
        
        async function updateOrderStats() {
            try {
                const result = await makeRequest(`${API_CONFIG.ORDER_SERVICE}/api/orders`);
                if (result.success && Array.isArray(result.data)) {
                    const orders = result.data;
                    document.getElementById('order-count').textContent = orders.length;
                    
                    const totalAmount = orders.reduce((sum, order) => sum + (order.price || 0), 0);
                    document.getElementById('total-amount').textContent = `¥${(totalAmount / 100).toFixed(2)}`;
                }
            } catch (error) {
                console.error('更新订单统计失败:', error);
            }
        }
        
        // 页面加载时初始化统计数据
        window.addEventListener('load', function() {
            updateUserCount();
            updateOrderStats();
        });
    </script>
</body>
</html>